<template>
  <div>
    <!-- Form -->

    <el-button type="text" @click="dialogFormVisible = true;operateType='save'">添加用户</el-button>

    <el-dialog title="商品类型" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="productType">
        <el-form-item label="分类编号" :label-width="formLabelWidth">
          <el-input v-model="productType.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="productType.product_type_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="分类描述" :label-width="formLabelWidth">
          <el-input v-model="productType.product_type_desc" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="分类图标" :label-width="formLabelWidth">
          <el-input v-model="productType.product_type_icon" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>



    <el-table
        :data="ProductTypes"
        style="width: 100%">
      <el-table-column
          label="分类编号"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="分类名称"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.product_type_name }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="分类描述"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.product_type_desc }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="分类图标"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.product_type_icon }}</span>
        </template>
      </el-table-column>



      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!--  分页查询-->
       <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="ProductTypeFindAll"
        >
        </el-pagination>

  </div>
</template>


<script>

export default {
  data(){
    return{
      ProductTypes:[],
      dialogFormVisible:false,//控制对话框显示
      formLabelWidth:"120px",
      productType:{id:'',product_type_name:'',product_type_desc:'',product_type_icon:''},
      operateType:'',//操做类型进行判断
      total:0,//用户总数
      pageSize:5,//每一页行数
      current:0//当前页数
    }
  },
  methods:{
    //查所有分页
     ProductTypeFindAll(current){
        this.current=current
        this.$http.get('/productType?m=page&current='+this.current+"&pageSize="+this.pageSize)
            .then(resp=>{
              if (resp.data.data){
                this.ProductTypes=resp.data.data.records
                this.total=resp.data.data.total
              }
            })
      },

    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.operateType='update';

      //显示对话框 绑定数据
      this.dialogFormVisible=true
      //进行深克隆   row ----string ----json
      this.productType=JSON.parse(JSON.stringify(row));
    },

    handleSave(){
      if (this.operateType=='save'){
        //添加用户
        this.$http.post('/productType?m=save',this.$qs.stringify(this.productType))
            .then(resp=>{
              console.log('save',resp.data)
              if (resp.data.data==true){
                this.ProductTypeFindAll(this.current);
              }
            })
      }else {
        //更改用户
        this.$http.post('/productType?m=update',this.$qs.stringify(this.productType))
            .then(resp=>{
              console.log('update',resp)
              if (resp.data.data==true){
                this.ProductTypeFindAll(this.current);
              }
            })
      }
      this.dialogFormVisible=false
    },


    //删除
    handleDelete(index, row) {
      console.log(index);//下标
      console.log(row);//id
      //console.log(index, row);
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/productType?m=delete&id='+row.id)
            .then(resp=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.ProductTypeFindAll(this.current);
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });



    },
    //对话框关闭
    handleClose(){
      this.productType={id:'',product_type_name:'',product_type_desc:'',product_type_icon:''},
          this.operateType=''
    }
  },
  mounted() {
    this.ProductTypeFindAll(1)
  }
}
</script>